<template>
	<view>
		<carHeader :title="'核销记录'"></carHeader>
		<view class="input">
			<u--input class="shuru" placeholder="请输入需要搜索的内容" border="surround" v-model="value" @input="handleInput">
			</u--input>
			<image class="img1" src="../../static/车联网服务商家端-03核销记录_slices/搜索.png" @click="search"></image>

		</view>

		<block v-for="(item,index) in list" :key="index">
			<view class="one">
				<view class="text1">服务项目:{{item.proName}}</view>
				<view class="text2">下单用户:{{item.nickName}}</view>
				<view class="text3">实付金额：￥{{item.ordActualPrice}}</view>
				<view class="text4">核销时间：{{item.verificationTime}}</view>
			</view>
		</block>


	</view>

</template>

<script>
	import list from '../../uni_modules/uview-ui/libs/config/props/list';
	export default {
		data() {
			return {
				value: '',
				list: []
			}
		},
		onLoad() {
			const that = this; // 保存 this 的引用
			uni.request({
				url: 'http://localhost:8080/carShopService/order/list1',
				success: function(res) {
					if (res.statusCode === 200) {
						console.log(res.data);
						that.$set(that, 'list', res.data); // 直接更新 list
					} else {
						console.error('请求失败，状态码：', res.statusCode);
					}
				},
				fail: function(err) {
					console.error('请求失败：', err);
				}
			});
		},
		methods: {
			handleInput(event) {
				console.log('当前输入的值:', this.value);
			},
			search() {
				uni.request({
					url: 'http://localhost:8080/carShopService/order/query2',
					method: 'POST',
					header: {
						'content-type': 'application/json',
					},
					data: {
						input: this.value
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (res.data && res.data) {
								this.list = res.data;
							} else {
								console.error('搜索接口返回数据结构不符合预期');
							}
						} else {
							console.error('搜索请求失败，状态码：', res.statusCode);
						}
					},
					fail: (err) => {
						console.error('搜索请求失败：', err);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.one {
		width: 90%;
		height: 300rpx;
		background-color: white;
		position: relative;
		top: -120rpx;
		left: 5%;
		border-radius: 10px;

		.text1 {
			width: 600rpx;
			height: 60rpx;
			margin-left: 40rpx;
			margin-top: 20rpx;
			font-size: 35rpx;
			font-weight: 600;
			line-height: 60rpx;
			border-bottom: 5rpx solid #EDEDED;
		}

		.text2 {
			width: 600rpx;
			margin-left: 40rpx;
			height: 58rpx;
			margin-top: 20rpx;
			font-size: 30rpx;
			line-height: 58rpx;
			font-weight: 600;
		}

		.text3 {
			width: 600rpx;
			margin-left: 40rpx;
			height: 58rpx;
			margin-top: 20rpx;
			font-size: 30rpx;
			line-height: 58rpx;
			border-bottom: 5rpx solid #EDEDED;
			font-weight: 600;
		}

		.text4 {
			width: 600rpx;
			margin-left: 40rpx;
			height: 40rpx;
			margin-top: 20rpx;
			line-height: 40rpx;
			font-weight: 600;

		}
	}

	.input {
		.shuru {
			position: absolute;
			top: 100rpx;
			background-color: white;
			left: 120rpx;
			border-radius: 20px;
			width: 500rpx;

		}

		.img1 {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: 125rpx;
			right: 120rpx;
		}

	}
</style>